<template>
  <div class="table-search-page">
    <a-card class="g-mt-10" :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" :form="form" :selfUpdate="true">
          <a-row :gutter="12">
            <a-col :md="12" :lg="6" :sm="12" style="padding: 0 4px;">
              <a-form-item label="登记时间">
                <a-range-picker allowClear v-model="tegistrationTime" style="width: 100%;" @change="timeSearchChange">
                  <a-icon slot="suffixIcon" type="calendar"/>
                </a-range-picker>
              </a-form-item>
            </a-col>
            <!-- <a-col :md="12" :lg="5" :sm="12" style="padding: 0 4px;">
              <a-form-item label="客户卡号">
                <a-input v-decorator="['cardNo']" allow-clear placeholder="客户卡号"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :lg="5" :sm="12" style="padding: 0 4px;">
              <a-form-item label="联系号码">
                <a-input v-decorator="['mobile']" allow-clear placeholder="联系号码"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :lg="4" :sm="12" style="padding: 0 4px;">
              <a-form-item label="客户姓名">
                <a-input v-decorator="['name']" style="width: 100%" allow-clear placeholder="姓名"/>
              </a-form-item>
            </a-col> -->
            <a-col :md="2" :lg="4" :sm="12">
              <div class="table-page-search-submitButtons g-flex" style="margin-bottom: 4px;">
                <!-- <a-icon :type="advanced ? 'up' : 'down'" @click="advanced=!advanced" style="margin-right: 15px;"/> -->
                <a-button type="primary" @click="clickSearch">查询</a-button>
                <a-button style="margin-left: 8px" @click="clickReset">重置</a-button>
              </div>
            </a-col>
          </a-row>
          <!-- <a-row :gutter="12" v-show="advanced">
            <a-col :md="12" :lg="6" :sm="12" style="padding: 0 4px;">
              <a-form-item label="开发人员">
                <a-select
                  @search="select_search_developer"
                  :showSearch="true"
                  option-filter-prop="children"
                  allow-clear
                  option-label-prop="label"
                  style="width: 100%"
                  v-decorator="['developer']"
                  placeholder="选择，搜索">
                  <a-select-option v-for="item in allHisUser.userList" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :lg="5" :sm="12" style="padding: 0 4px;">
              <a-form-item label="所属咨询">
                <a-select
                  @search="select_search_consultMan"
                  :showSearch="true"
                  option-filter-prop="children"
                  allow-clear
                  option-label-prop="label"
                  style="width: 100%"
                  v-decorator="['consultMan']"
                  placeholder="选择，搜索">
                  <a-select-option v-for="item in allHisUser.userList" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :lg="5" :sm="12" style="padding: 0 4px;">
              <a-form-item label="客户等级">
                <a-select
                  allow-clear
                  option-label-prop="label"
                  style="width: 100%"
                  v-decorator="['customerLevel']"
                  placeholder="客户等级">
                  <a-select-option v-for="item in customerLevel" :key="item.id" :label="item.name" :value="item.id">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :lg="4" :sm="12" style="padding: 0 4px;">
              <a-form-item label="客户状态">
                <a-select
                  allow-clear
                  option-label-prop="label"
                  style="width: 100%"
                  v-decorator="['customerState']"
                  placeholder="状态">
                  <a-select-option v-for="item in customerState" :key="item.id" :label="item.name" :value="item.id">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row> -->
        </a-form>
      </div>
    </a-card>

    <a-card :bordered="false">
      <a-button type="primary" @click="settlementAdd()" v-if="routerPath != '/monthCheck'">日结</a-button>
      <super-table
        :scroll="{ x: 1300}"
        ref="table"
        :rowKey="(record,index)=> index"
        :columns="columns"
        :data="loadData"
      >
        <!--序号-->
        <template slot="index" slot-scope="text,record,index">
          <span>{{(queryParam.pageNum-1)*pagination.pageSize+(index+1)}}</span>
        </template>
        <!--客户卡号-->
        <template slot="cardNo" slot-scope="text,record">
          <div class="g-color g-f-14" style="cursor: pointer;" @click="toCustomerDetails(text,record)">{{ text }}</div>
        </template>
        <template slot="action" slot-scope="text,record">
          <div class="g-flex">
            <a-button style="padding:0;" type="link" @click="openDrawer(record)" >详情</a-button>
          </div>
        </template>
       
 
        <span slot="settleType" slot-scope="text">
          <a-tag :color="text == '1' ? '#39f' : 'green'">
            {{ text == '1' ? '日初结' : (text == '2' ? '日终结':'月终结') }}
          </a-tag>
        </span> 
        
        
      </super-table>

    </a-card>
    <!-- 日结提示 -->
    <a-modal 
      title="确认日结"
      :visible="settlementVisible" 
      @ok="handleOk"
      @cancel="handleCancel"
      class="model-loading-box"
      
    >
      <!-- <p>日结时间：{{gettime}}</p>
      <p>是否确认日结，并生成日结记录</p> -->
      <a-row :gutter="12">
        <a-col :md="8" :lg="8" :sm="12">
          <a-date-picker allow-clear v-model="dayTimeDate" style="width: 100%;"
            :disabledDate="disabledDate" :showToday="false" @change="dateChange" > 

            <template slot="dateRender" slot-scope="current, today">
              <div class="ant-calendar-date"  :style="getCurrentStyle(current, today)">
                {{ current.date() }}
              </div>
            </template>

          </a-date-picker>

            
        </a-col>
      </a-row>
      <p class="has-settled-saily-style" v-if="hasSettledDailyShow">{{hasSettledDailyMsg}}</p>

      <!-- loading start -->
      <!-- <a-spin class="settlement-loading-style" :indicator="indicator" size="large" :spinning="settlementLoading" :tip="settlementLoadingText+'...'"></a-spin> -->
      
      <div  class="settlement-loading-style" v-if="settlementLoading">
        <div class="settlement-loading-style-timeline">
          <a-time-line pending="Recording..." :reverse="true" > 
            <!-- <a-timeline-item :color="index+1 == loadingTextArr.length ?'blue':'green'" v-for="(item,index) in loadingTextArr" :key="index" name="1">{{item}} 
                <a-icon v-if="index+1 == loadingTextArr.length" slot="dot" type="clock-circle-o" style="font-size: 16px;" /> 
            </a-timeline-item> -->
            <a-timeline-item color="green">
              开始结算中 
            </a-timeline-item>
            <a-timeline-item :color="(loadingTextArr.includes('2') ? 'green':'gray')" >
              支付方式结算成功，支付渠道结算中
              <!-- <a-icon v-if="loadingThisText == 1" slot="dot"  type="clock-circle-o" style="font-size: 16px;color:red !important;" />  -->
              <img v-if="loadingThisText == 1" slot="dot" style="width:18px;height:18px;" src="../../../assets/time.gif" />
            </a-timeline-item>
           
            <a-timeline-item :color="loadingTextArr.includes('2') ? 'green':'gray'" >
              支付渠道结算成功，科室项目结算中
              <!-- <a-icon v-if="loadingThisText == 2" slot="dot" type="clock-circle-o" style="font-size: 16px;color:red !important" />  -->
               <img v-if="loadingThisText == 2" slot="dot" style="width:18px;height:18px;" src="../../../assets/time.gif" />
            </a-timeline-item>
            <a-timeline-item :color="loadingTextArr.includes('3') ? 'green':'gray'">
              科室项目结算成功，订单明细结算中
              <!-- <a-icon v-if="loadingThisText == 3" slot="dot" type="clock-circle-o" style="font-size: 16px;color:red !important" />  -->
               <img v-if="loadingThisText == 3" slot="dot" style="width:18px;height:18px;" src="../../../assets/time.gif" />
            </a-timeline-item>
            <a-timeline-item :color="loadingTextArr.includes('4') ? 'green':'gray'">
              日结成功
              <!-- <a-icon v-if="loadingThisText == 4" slot="dot" type="clock-circle-o" style="font-size: 16px;color:red !important" />  -->
               <img v-if="loadingThisText == 4" slot="dot" style="width:18px;height:18px;" src="../../../assets/time.gif" />
            </a-timeline-item> 
          </a-time-line> 

          <!-- <a-timeline-item color="blue">
            <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px;" />
            Technical testing 2015-09-01
          </a-timeline-item> -->
          
        </div>
      </div>

      <!-- end -->

      <template slot="footer"> 
        <a-button type="primary" :disabled="hasSettledDailyShow" @click="handleOk()" :loading="settlementLoading">确定</a-button>
      </template>
    </a-modal>

    <!-- 图片显示 -->
    <a-modal 
      width="1015px"
      :visible="imgVisible"  
      cancelText="关闭"
      @cancel="handleCancel2" 
    >
      <img :src="imgSrc" style="width:100%" />
      <template slot="footer"> 
        <a-button type="primary" @click="handleCancel2()">关闭</a-button>
      </template>
    </a-modal>

    <!--项目抽屉--弹窗-->
    <item-drawer ref="itemDrawer" :row_record="current_row_record" />

    
  </div>
</template>

<script>
import { AllHisUser, CustomerLevel, CustomerState } from '@/api/customer/customer'
import { CustomerFeedback } from '@/api/modular/main/customer/customerReturnVisit' 
import {getReport,returnOrder, testingAccountNumber,beginReport,settleHtmlSettle_1,handlePaymentList,selectSettleDateReport} from '@/api/modular/main/customer/cashier'
import { SuperTable, upTime } from '@/components'
import itemDrawer from '@/views/Cashier/dayCheck/itemDrawer'
import moment from 'moment'
import { axios } from '@/utils/request'
import {Timeline} from 'ant-design-vue'

export default {
  components: {
    SuperTable,
    upTime,
    itemDrawer,
    [Timeline.Item.name]: Timeline.Item
  },
  
  data() {
    return {
      dayTimeDate:'',
      loadData: parameter => {
        this.queryParam.pageNum = parameter.pageNum
        this.queryParam.pageSize = parameter.pageSize
        return handlePaymentList(this.queryParam).then(res => {
          this.loading = false//关闭加载
          let newData = Object.assign({},res)
          console.log(newData)
          return newData
        })
      },
      form: this.$form.createForm(this),
      customerState: [],//客户状态
      customerLevel: [],//客户等级
      advanced: false, // 高级搜索 展开/关闭
      disabled: true, //是否禁用新增按钮
      current_row_record: {},
      columns: [
        { title: '序号', align:'center', scopedSlots: { customRender: 'index' },width:80,fixed:'left' },
        { title: `结算时间`, align:'center', dataIndex: 'settleDate', width: 120,  ellipsis: true,
        customRender: (text, record) => {
          if(this.routerPath == '/monthCheck'){
            return `${new Date(text).getFullYear()}-${new Date(text).getMonth() + 1}`
          }else{
            return text
          }
        }},
        { title: '状态', align:'center', dataIndex: 'settleType', scopedSlots: { customRender: 'settleType' },  width: 120,  ellipsis: true },
        
        { title: '总额', align:'center', dataIndex: 'totalAmount', width: 100, ellipsis: true },
        { title: '现金', align:'center', dataIndex: 'cashAmount', width: 100, ellipsis: true },
        { title: '银行卡', align:'center', dataIndex: 'bankCardAmount', width: 120, ellipsis: true },
        { title: '券/其他', align:'center', dataIndex: 'couponAmount', width: 120, ellipsis: true },
        { title: '应收欠款', align:'center', dataIndex: 'type', width: 120, ellipsis: true },
        { title: 'POS机位', align:'center', dataIndex: 'posNo', width: 120, ellipsis: true },
        { title: '科室总金额', align:'center', dataIndex: 'itemCategoryAmountAll', width: 140, ellipsis: true },
        // { title: '科室日终结总金额', align:'center', dataIndex: 'itemCategoryAmountAll1', width: 140, ellipsis: true },
        
        // { title: '修复消费', dataIndex: 'totalUnpaidAmt', width: 120, ellipsis: true },
        // { title: '其中划押金', dataIndex: 'totalChargeAmt', width: 120, ellipsis: true },
        // { title: '当天收款', dataIndex: 'orderId', width: 120, ellipsis: true },
        // { title: '现金收款', dataIndex: 'biller', width: 100, ellipsis: true },
        // { title: '银行收款', dataIndex: 'developer', width: 100, ellipsis: true },
        { title: '操作日期', align:'center', dataIndex: 'endTime1', width: 120,  ellipsis: true },
        { title: '操作', align:'center', scopedSlots: { customRender: 'action' }, fixed:'right', width: 80 },
      ],
      data: [],
      pagination: {
        current: 1,//当前页
        pageSize: 10,//当前页数
        total: 0,//总条数
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '30'],//这里注意只能是字符串，不能是数字
        showTotal: total => `共有 ${total} 条数据`//分页中显示总的数据
      },
      // 查询参数
      queryParam: {
        pageNum: 1,//第几页
        pageSize: 10,//每页中显示数据的条数
        type: 1,
        begintime: undefined,
        endtime: undefined,
        chargeType:1
      },
      loading: true, //加载状态,
      current_row_index: '',
      customerFeedback: {},
      allHisUser: {}, //回访人对象
      currentActiveKey: 1,
      
      // 日结显示
      settlementVisible: false,
      // 时间
      gettime:'',
      // 图片
      imgVisible: false,
      imgSrc:'',

      settlementLoading: false,
      settlementLoadingText: '开始结算中',  // 日结loading
      indicator: <a-icon type="loading" spin />,
      loadingTextArr: [],
      loadingThisText: 1,

      routerPath: '',

      hasSettledDailyShow: false,
      hasSettledDailyMsg:'',

      tegistrationTime: [],

      INTimeData: []
    }
  },
  created() {
     
    this.getBaseFormInfo()
  
    this.routerPath = this.$route.path
    if(this.$route.path == '/monthCheck'){
      this.queryParam.type = '2'
    }else{
      this.queryParam.type = '1'
    }
    
    this.getInTimeFunc()
     
  },
  watch: {
    $route(to,from){
      console.log(from.path);  //从哪来
      console.log(to.path);  //到哪去
      this.routerPath = to.path
      if(to.path == '/monthCheck'){
        this.queryParam.type = '2'
      }else{
        this.queryParam.type = '1'
      }
      this.$nextTick(() => {
        // this.loadData()
        this.$refs.table.refresh()
      })
    }
     
  },
  methods: { 
    getInTimeFunc(){
      selectSettleDateReport().then(res => {
        this.INTimeData = res.rows
      })
    },
     
    getCurrentStyle(current, today) { 
      let style = {}; 
      let boolD = this.INTimeData.filter(item => { 
        return item.settleDate == `${current.year()}-${current.month()+1}-${current.date()<10?'0'+current.date():current.date()}`
      }) 
      
      if(boolD.length > 0){ 
        let newData = boolD[0]
        if(boolD.length > 1){
          newData = boolD.find(item => {
            return item.settleType == '2'
          })
        }
        if(newData.settleType == '1'){
          style.border = '1px solid #3399ff';
          style.backgroundColor = '#3399ff';  
          style.color = '#fff'
        }else{
          style.border = '1px solid #b7eb8f';
          style.backgroundColor = '#f6ffed'; 
          style.color = '#52c41a'
        }
        
        
      } 
      return style;
    },
    // 日结日期修改
    dateChange(monent,day){
      console.log(monent,day)
      let sendData = {
        date: day
      }
      console.log(day.length)
      if(day.length > 0){
        console.log('chufa')
        getReport(sendData).then(result => {
          if(result.code == 1){
            this.hasSettledDailyShow = true
            this.hasSettledDailyMsg = result.msg
          }else{
            this.hasSettledDailyShow = false
            this.hasSettledDailyMsg = ''
          }
        })
      }
      
    },
    // 禁用
    disabledDate(current) { 
      return current && current > moment().subtract(0,"days");//当天之前的不可选，不包括当天 
      
      //return current && current < moment().endOf(‘day');当天之前的不可选，包括当天 
    },
    
    // 新增日结点击 确认
    handleOk(e) {  
      this.loadingTextArr = ['正在结算中...']
       
      let sendData = {
        date: moment(this.dayTimeDate!=''?this.dayTimeDate:(new Date())).format('YYYY-MM-DD'),
        settleType: 1
      }
  
      this.settlementLoading = true
      testingAccountNumber(sendData).then(res => {
        console.log(res)
        if(res.code === -1){
          beginReport(sendData).then(result => {
            console.log(result) 
            if(result.code == 0){
              settleHtmlSettle_1(sendData).then(elem => { 
                if(elem.code == 0){
                  this.loadingThisText = elem.msg
                  this.loadingTextArr.push(elem.msg)
                  this.settlementLoadingText = elem.msg 
                  this.loadingFunc(elem.step) 
                }else{
                  this.$message.error(elem.message)
                }
              })
            }
          })

        }else if(res.code === 0){
          settleHtmlSettle_1(sendData).then(elem => {
            console.log(elem)
              if(elem.code == 0){
                this.loadingThisText = elem.msg
                this.loadingTextArr.push(elem.msg)
                this.settlementLoadingText = elem.msg 
                this.loadingFunc(elem.step) 
              }else{
                this.$message.error(elem.message)
              }
          })
        }else if(res.code === 1){
          this.settlementLoading = false 
          this.$message.error(res.msg)
          this.settlementVisible = false;   
        }
      })

    },
    loadingFunc(url,type = 1){ 
      let sendData = {
        settleType: type
      } 
      let thisOldTime = new Date().getTime()
      axios({
        url: url ,
        methods: 'get',
        data: sendData,

      }).then(elem => {

        let timeData = ((new Date().getTime()) - thisOldTime) / 1000 

        if(timeData < 2){ 
          let timeoutClear = setInterval(() => {
            timeData = timeData + 1 
            if(timeData > 2){ 
              clearInterval(timeoutClear)
              this.loadingThisText = elem.msg
              this.loadingTextArr.push(elem.msg)
              this.settlementLoadingText = elem.msg
              if(elem.step != ''){
                return this.loadingFunc(`${elem.step}`)
              }else{

                this.loadingThisText = elem.msg
                this.loadingTextArr.push(elem.msg)

                setTimeout(() => {
                  this.$refs.table.loadData()
                  this.getInTimeFunc()
                  this.settlementLoading = false 
                  this.imgVisible = true 
                  this.settlementVisible = false;  
                  this.$message.success(elem.message)
                  this.imgSrc = `${elem.row}`  

                  this.loadingThisText = ''
                  this.loadingTextArr = [] 

                  this.dayTimeDate = ''
                  this.hasSettledDailyShow = false
                }, 1000);  
              }
            }
          }, 1000); 
        }else{
          this.loadingThisText = elem.msg
          this.loadingTextArr.push(elem.msg)
          this.settlementLoadingText = elem.msg
          if(elem.step != ''){
            return this.loadingFunc(`${elem.step}`)
          }else{
            
            this.loadingThisText = elem.msg
            this.loadingTextArr.push(elem.msg)

            setTimeout(() => {
              this.$refs.table.loadData()
              this.getInTimeFunc()
              this.settlementLoading = false 
              this.imgVisible = true 
              this.settlementVisible = false;  
              this.$message.success(elem.message)
              this.imgSrc = `${elem.row}`  

              this.loadingThisText = ''
              this.loadingTextArr = [] 

              this.dayTimeDate = ''
              this.hasSettledDailyShow = false 
            }, 1000);  
          }
        }

       
      })
    },
     
    handleOk2(){
      this.imgVisible = false
    },
    handleCancel2(){
      this.imgVisible = false
      
    },
     // 新增日结点击 确认
    handleCancel(e) { 
      console.log('触发')
      this.settlementVisible = false; 
      this.settlementLoading = false   
        
      this.loadingThisText = ''
      this.loadingTextArr = [] 
      this.hasSettledDailyMsg = ''
      this.dayTimeDate = ''
      
    }, 
    // 新增日结
    settlementAdd(){
      this.settlementVisible = true;
      this.getCurrentTime()
    },

    // 获取当前的日期
    getCurrentTime() {
      //获取当前时间并打印
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth()+1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
      let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
      _this.gettime = yy+'/'+mm+'/'+dd+' '+hh+':'+mf+':'+ss; 
    },




    checkPattern(str) {
      const pattern = new RegExp('[\u4E00-\u9FA5]+')
      if (pattern.test(str)) {
        return true
      }
      return false
    },
    
      

    moment,
    toCountDown(time) {
      //1000代表1秒，1000*60代表60分钟
      return Date.now() + parseInt(time) * 1000
    },
    minutesToSeconds(time) {
      return parseInt(time)
    },
    changeRadio(e){
      const value =e.target.value
      this.queryParam.chargeType = value
      this.$refs.table.loadData()
    },
    timeSearchChange(date,day){
      console.log(day)
      this.tegistrationTime = day
    },
    //点击查询-高级搜索
    clickSearch() {
      this.queryParam.pageNum = 1
      this.queryParam.pageSize = 10
      this.queryParam.current = 1

      // const form_values = this.form.getFieldsValue()
      let form_values = {}
      const time = this.tegistrationTime
      console.log(time)
      if (time && time.length > 0 && time[0] != '' && time[1] !='') {
        form_values.settleDate = moment(time[0]).format('YYYY-MM-DD')
        form_values.endTime = moment(time[1]).format('YYYY-MM-DD') 
      }else{
        form_values.settleDate = undefined
        form_values.endTime = undefined
      }
      this.queryParam = Object.assign(this.queryParam,form_values)
      this.$refs.table.loadData()
    },
    clickReset() {  
      let form_values = {}
      this.tegistrationTime = [] 
      form_values.settleDate = undefined
      form_values.endTime = undefined 
      this.queryParam = Object.assign(this.queryParam,form_values)
    },
    openDrawer(record){
      record.routerPath = this.routerPath
      this.current_row_record=record
      this.$refs.itemDrawer.show()
    },
    /**
     * 已收费-退费
     * **/
    refund(record){
      let _this =this
      this.$confirm({
        title: '确认要将笔订单做退费处理吗？',
        content: h => <div style="color:red;">该订单将退费，如果再次收款，请前往未收费列表</div>,
        onOk() {
          console.log('退回')
          const orderId=record.orderId
        },
        onCancel() {
          console.log('Cancel');
        },
        class: 'test',
      });
    },
    returnCharge(record){
      let _this =this
      this.$confirm({
        title: '确定要退回该笔订单吗？',
        content: h => <div style="color:red;">该订单将退回现场咨询，如果需要重新收费，请现场咨询再次提交</div>,
        onOk() {
          console.log('退回')
          const orderId=record.orderId
          returnOrder({orderId}).then(res=>{
            console.log('退单结果',res)
            if(res.code==200){
              _this.$message.success('退回成功')
              _this.$refs.table.refresh()
            }else{
              _this.$message.info(res.message)
            }
          })
        },
        onCancel() {
          console.log('Cancel');
        },
        class: 'test',
      })

    },
    /***
     * 项目收费成功
     * **/
    itemChargeSuccess(){
      this.$refs.table.refresh()
    },
    /***
     * 已收费-详情
     * **/
    clickChargeDetails(record){
      this.current_row_record=record
      this.$refs.ChargeDetailsDrawer.show()
    },
    /***
     * 未收齐-收费
     * **/
    clickArrearsCharge(record){
      this.$router.push({
        path: '/arrearsToCharge'
      })
    },
    changeTabs(key) {
      this.currentActiveKey = key
      this.queryParam.type = key
      if(key==3){
        this.queryParam.chargeType=undefined
      }else{
        this.queryParam.chargeType=1
      }
      this.$nextTick(()=>{
        this.$refs.table.loadData()
      })

    },
    //点击查看客户详情
    toCustomerDetails(text, record) {
      // console.log(record)
      this.$router.push({
        path: 'customer_details', query: {
          id: record.customerId,
          card_no: record.cardNo,
          customerName:record.customerName
        }
      })
    },
    clickItemCharge(record){
      this.current_row_record=record
      this.$refs.itemCharge.show()
    },
    clickDepositCharge(record){
      this.current_row_record=record
      this.$refs.depositCharge.show()
    },
    // 表格行点击事件
    clickRow(record, index) {
      return {
        on: {
          click: () => {
            // console.log('点击当前行',record)
            this.disabled = false
            this.current_row_index = index
            this.current_row_record = record
          }
        }
      }
    },
    //获取表单相关接口
    getBaseFormInfo() {
      CustomerFeedback().then(res => {
        // console.log('回访相关表单接口',res)
        this.customerFeedback = res
      })
      AllHisUser().then(res => {

        this.allHisUser = res
        // this.allHisUser.userList=transformKey(this.allHisUser.userList,'id','value')
        // console.log('全员员工接口',this.allHisUser.userList)

      })
      CustomerLevel().then(res => {
        this.customerLevel = res
      })
      CustomerState().then(res => {
        this.customerState = res
      })
    }
  }

}
</script>

<style lang="less" scoped>

.table-operator {
  margin-bottom: 18px;
}

button {
  margin-right: 8px;
  margin-bottom: 2px;
}

.currentRowClass {
  background: #e6f7ff;
}

/deep/ .ant-tabs-bar {
  border-bottom: none;
}

/deep/ .ant-badge-count, .ant-badge-dot, .ant-badge .ant-scroll-number-custom-component {
  right: -10px;
}
/deep/ .model-loading-box{
  .ant-modal-body{
    position: relative;  
  }
  
}
/deep/ .has-settled-saily-style{
  font-size: 14px;
  line-height: 40px;
  margin-bottom: 0;
}
.settlement-loading-style{
  font-weight: bold;
  color: #3399ff;
  position: absolute;
  top: 80px;
  width: 100%;
  margin-left: -24px;
  font-size: 18px;
  background-color: #fff;
  min-height: 146px;
  z-index: 10;
  margin-top: -3px;

  .settlement-loading-style-timeline{
    width: 300px;
    margin: 0 auto;
    .ant-timeline-item-content{
      font-size: 17px;
      line-height: 26px;
      margin-left: 25px;
    }
  }
}
</style>